<template>
      <div class="home-view-container">
            <div class="home-view-content">
                  <div class="home-item" v-for="(item, i) in itemList"
                        :style="{ '--j': Math.floor(i / 4) + 2, '--i': i % 4 + 1 }" @click=openView(item)><span>{{
                              item.title }}</span>
                  </div>
            </div>
      </div>
</template>

<script>
export default {
      name: "HomeView",
      components: {},
      data() {
            return {
                  itemList: [
                        {
                              title: "前端案例",
                              path: "/StyleView",
                        },
                        {
                              title: "算法演示",
                              path: "/AlgorithmView",
                        },
                        {
                              title: "在线工具",
                              path: "/UtilsView",
                        },
                        
                  ],
            }
      },
      computed: {},
      methods: {
            openView(item) {
                  if (!item.path || item.path == '') {
                        item.title = "敬请期待";
                        return;
                  }
                  window.open(item.path, "_blank");
            },

      },
      mounted() {

      },
      beforeUnmount() {
      },
}
</script>

<style scoped>
.home-view-container {
      width: 100vw;
      height: 100vh;
}

.home-view-content {
      width: 100%;
      height: 100%;
      position: relative;
      display: grid;
      background: linear-gradient(200deg, #598a68, #75a1d3);
      grid-auto-rows: 200px;
      gap: 40px;
}

.home-item {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 20px;
      box-shadow: 20px 20px 10px #60589d;
      background: linear-gradient(90deg, #9f9dd8, #5247a0);
      grid-row: var(--j);
      cursor: pointer;
      grid-column: calc(var(--i))/span 1;
}

.home-item:hover {
      background: linear-gradient(180deg, #4642a8, #8447a0);
      transform: scale(1.05);
      transition: 0.5s;
}

.home-item>span {
      text-align: center;
      font-size: 30px;
      font-weight: bolder;
      color: #2c2c2c;
      user-select: none;
}

.home-item:hover>span {
      color: #11b4d9;
      transition: 1s;
}
</style>